<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /*
    *
     属性选择器:可以根据标签属性，或者属性值来选指定元素
     语法:
        - [属性名] 选取含有该属性的标签
        - []
    */
/* 带有title属性的p标签 */
p[title]{
    color: red
}
/* title = abc 的p标签 */
p[title='abc']{
    background-color: yellow
}
/* title 属性值 以 a 开头的p 标签 */
p[title^='a']{
  font-size: 20px
}
/* title 属性值 以 c 结尾的p标签 */
p[title$='c']{
    color: blue
}
/* title属性值 含有 b 的p标签 */
p[title*='b']{
    color: yellow
}
</style>
<body>
    <p title="hello">这是第一个p</p>
    <p title="aa">这是第二个p</p>
    <p title="bb">这是第三个p</p>
    <p title="abcc">这是第四个p</p>
    <p title="abc">这是第五个p</p>
</body>
</html>